<template>
  <div id="notice">
    <app-header></app-header>
    <div class="notice-main">
      <ul class="notice-list">
        <li v-if="noticeList.value&&noticeList.value.length>0" v-for="(list,index) in noticeList.value" :key="index"
            @click="handleList(list)">
          <span class="notice-dec">{{list.title}}</span>
          <span class="notice-time">{{list.launchTime}}</span>
        </li>
      </ul>
      <div class="beet-page">
        <van-pagination
          v-if="noticeList.totalCount&&noticeList.totalCount>noticeList.pageSize"
          class="page_list"
          prev-text="<"
          next-text=">"
          v-model="noticeList.pageNum"
          :total-items="noticeList.totalCount"
          :items-per-page="noticeList.pageSize"
          @change="handleCurrentChange"
          force-ellipses
        />
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'vant'
  import Header from '@/components/component/header.vue'
  import Api from '@/axios'

  export default {
    name: 'notice',
    data() {
      return {
        noticeList: {
          totalCount: null, // 总条数
          pageNum: 1, // 当前显示页号
          pageSize: 10, // 每页显示数据条数
          value: []
        }
      }
    },
    components: {
      'app-header': Header
    },
    methods: {
      getNotice() {
        let prama = {
          pageNum: this.noticeList.pageNum,
          pageSize: this.noticeList.pageSize
        }
        Api.getTopic(prama).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.noticeList.value = result.data.data
            this.noticeList.totalCount = result.data.totalCount
          }
        })
      },
      handleCurrentChange(pageNumber) {
        this.noticeList.pageNum = pageNumber
        this.getNotice()
      },
      handleList(data) {
        this.$router.push({
          path: '/details',
          query: {
            id: data.id
          }
        })
      }
    },
    mounted() {
      this.getNotice()
    }
  }
</script>

<style lang="less" scoped>
  #notice {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    padding-bottom: 94px;
    box-sizing: border-box;
    .notice-main {
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      margin: 0 auto;
      background: #020C47;
      .notice-list {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
        padding: 0 20px;
        box-sizing: border-box;
        > li {
          position: relative;
          width: 100%;
          height: 86px;
          border-bottom: 2px solid #E1A982;;
          padding-right: 160px;
          padding-left: 10px;
          box-sizing: border-box;
          .notice-dec, .notice-time {
            height: 100%;
            line-height: 86px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 24px;
            color: #FFFFFF;
          }
          .notice-dec {
            width: 100%;
            text-align: left;
            cursor: pointer;
          }
          .notice-time {
            position: absolute;
            top: 0;
            right: 10px;
            width: 140px;
            text-align: right;
            box-sizing: border-box;
          }
        }
      }
      .notice-detail {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 38px;
        white-space: pre-line;
      }
    }
  }
</style>
